<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: inline-block;
        }

        #search {
            width: 545px;
            height: 42px;
            border-color: #4E6EF2;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            float: left;
        }

        #btn {
            width: 108px;
            height: 42px;
            background-color: #4e6ef2;
            color: #fff;
            border: none;
            font-size: 17px;
            font-weight: 400;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            float: left;
        }

        #show {
            width: 545px;
            border: 1px solid #4e6ef2;
            position: relative;
            left: -55px;
            text-align: left;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<center>
    <img alt="" width="310" height="150" src="img/baidu.jpg"><br/>
    <div id="box">
        <input id="search" type="text" name="search"/>
        <button id="btn">百度一下</button>
    </div>
    <div id="show">

    </div>
</center>
</body>
</html>
<script>
    //给input一个键盘抬起事件
    $("#search").keyup(function () {
        //获取value值
        var value = $(this).val();
        //不等于空 查询数据库
        if(value != null && value.trim() != "") {
            $.ajax({
                url:"homeworkServlet",
                data:{"mark":"dimQuery","uname":value},
                type:"get",
                dataType:"json",
                success:function(data) {
                    //data list [{},{}]   []
                    var str = "";
                    for(var i = 0; i < data.length; i++) {
                        str += "<div>" + data[i].uname + "</div>";
                    }

                    $("#show").html(str);
                }
            })
        }else {
            $("#show").html("");
        }
    })
</script>